<template>
  <div class="singer">
    <div v-if="singerData.length > 0">
      <page-list-layout>
        <template v-slot:one>
          <div>
            <home-nav
                :title="homeNavTitle"
                :more="!store.isFlag"
                @jumpPlaylist="openPopup"
            />
            <show-card
                :singer-card="singerData"
                :activeSinger="activeSinger"
                @getAtistlist="getAtistlist"
            />
          </div>
        </template>
        <template v-slot:top>
          <singer-type
            :active-singer="activeSinger"
            @changeSingerType="changeSingerType"
          />
        </template>
      </page-list-layout>
    </div>
    <loading v-else/>
    <van-popup
        v-model:show="singerPopup"
        position="right"
        :style="{ height: '100%', width: '50%', paddingLeft: '8px' }"
    >
      <singer-type
          :active-singer="activeSinger"
          @changeSingerType="changeSingerType"
      />
    </van-popup>

  </div>
</template>

<script setup>
import {useStore} from "@/store/index"
import {reactive, toRefs} from "vue"

import PageListLayout from '@/components/PageListLayout/index.vue'
import HomeNav from '@/components/HomeNav/index.vue'
import ShowCard from './components/ShowCard/index.vue'
import SingerType from './components/SingerType/index.vue'

const store = useStore()
const data = reactive({
  homeNavTitle: '热门歌手', // 标题
  activeSinger: {}, // 存储当前活动的歌手
  singerData: [], // 存储歌手数据
  singerPopup: false // 移动端右侧弹窗
})
const { singerData, homeNavTitle, activeSinger, singerPopup } = toRefs(data)

// 获取热门歌手数据
const getTopArtists = () => {
  // 热门歌手
  store.getTopArtists().then(artists => {
    data.singerData = artists
    // console.log(artists)
  })
}
getTopArtists()

// 点击歌手类型切换歌手
const changeSingerType = (type) => {
  // 判断移动端弹窗是否打开，如果打开点击点击歌手类型之后就关闭
  if (data.singerPopup) {
    data.singerPopup = false
  }
  data.singerData = [] // 清空数据 用来显示loading框
  data.activeSinger = type // 存储当前活动类型歌手
  // 判断是否存在area不存在就是热门歌手
  if (type.area) {
    // 获取分类歌手数据
    getAtistlist(type)
  } else {
    // 获取热门歌手
    getTopArtists()
  }

}
const getAtistlist = ({ type, area, initial }) => {
  // 分类歌手
// type: 1(type值是男歌手，女歌手等), area:96（华语欧美等）, initial:b
  store.getAtistlist({ type, area, initial }).then(artists => {
    data.singerData = artists
    data.activeSinger.initial = initial
  })
}
// 移动端打开弹窗
const openPopup = () => {
  data.singerPopup = true
}
</script>

<style lang="scss" scoped>

</style>
